<template>
  <div class="group-table-box">

    <Row class="group-top">
      <Col span="8" offset="16" class="group-right">
        <div class="input-item" style="margin: 0;">
          <Button type="info" @click="onClickAddAccount">添加活动商品</Button>
        </div>
      </Col>
    </Row>

    <div class="table-container">
      <Table
        border
        class="table-container-table"
        :columns="columns7"
        :data="tableData"
        :loading="isLoading"
      ></Table>
      <Page
        :total="totalPageCount"
        :page-size="10"
        :current="form.pageIndex"
        show-elevator
        class="table-container-page"
        @on-change="getTableData"
      />
    </div>

    <!-- 点击编辑 -->
    <Modal
      v-model="showEditModal"
      @on-ok="onClickEditConfirm"
    >
      <div class="modal-container">
        <Divider orientation="left" class="modal-label">权限信息</Divider>
        <Row class="modal-content" :gutter="16">
          <Col span="12">
            <span>权限名称：</span>
            <Input v-model="form.roleName" placeholder="权限名称" style="width: auto" />
          </Col>
          <Col span="12">
            <span>权限备注：</span>
            <Input v-model="form.remark" placeholder="权限备注" style="width: auto" />
          </Col>
        </Row>
        <Divider orientation="left" class="modal-label">权限列表</Divider>
        <CheckboxGroup v-model="confirmData.menuIds" class="madal-radio-group">
          <template
            v-for="(item, index) in $store.state.authSelect"
          >
            <Divider orientation="left">
              {{ item.title }}
            </Divider>
            <template v-for="(itemChild, indexChild) in item.children">
              <Checkbox
                :label="itemChild.title"
                class="madal-radio"
              >{{ itemChild.title }}</Checkbox>
            </template>
          </template>
        </CheckboxGroup>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onClickAddConfirm">完成</Button>
        </div>
      </div>
    </Modal>

    <!-- 点击添加 -->
    <Modal
      v-model="showAddModal"
      width="50"
      footer-hide
    >
      <div class="modal-container">
        <Divider orientation="left" class="modal-label">权限信息</Divider>
        <Row class="modal-content" :gutter="16">
          <Col span="12">
            <span>权限名称：</span>
            <Input v-model="form.roleName" placeholder="权限名称" style="width: auto" />
          </Col>
          <Col span="12">
            <span>权限备注：</span>
            <Input v-model="form.remark" placeholder="权限备注" style="width: auto" />
          </Col>
        </Row>
        <Divider orientation="left" class="modal-label">权限列表</Divider>
        <CheckboxGroup v-model="confirmData.menuIds" class="madal-radio-group">
          <template
            v-for="(item, index) in $store.state.authSelect"
          >
            <!-- <Divider orientation="left">
              {{ item.title }}
            </Divider> -->
            <p>{{ item.title }} ：</p>
            <template v-for="(itemChild, indexChild) in item.children">
              <Checkbox
                :label="itemChild.id"
                class="madal-radio"
              >{{ itemChild.title }}</Checkbox>
            </template>
          </template>
        </CheckboxGroup>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onClickAddConfirm">完成</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLoading: false,
      showEditModal: false,
      showAddModal: false,
      totalPageCount: 10,
      form: {
        id: '',
        remark: '',
        roleName: '',
        gmtCreate: '',
        menuIds: [],
        pageIndex: 1,
        pageSize: 10,
      },
      confirmData: {
        roleName: '',
        remark: '',
        menuIds: []
      },
      columns7: [
        {
          title: '序号',
          type: 'index',
          align: 'center'
        },
        {
          title: '权限名称',
          key: 'roleName',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'gmtCreate',
          align: 'center'
        },
        {
          title: '权限备注',
          key: 'remark',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.check(params.index)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除')
            ]);
          }
        }
      ],
      tableData: [{
        roleName: '管理员'
      }]
    }
  },
  mounted() {
    // 获取所有菜单及id
    this.getAllMenusData()
    // 获取表格数据
    this.getTableData()
    // 设置权限列表数据
    this.setAuthSelect()
  },
  methods: {
    onClickAddAccount() {
      this.showAddModal = true
    },
    onClickEditConfirm() {
      //  点击修改
    },
    onClickAddConfirm() {
      // 点击添加确认按钮

      // 获取选中的菜单数据
        // 选中的表格数据
      let MenuListData = [{
        title: '首页管理',
        children: []
      },{
        title: '活动管理',
        children: []
      },{
        title: '问卷管理',
        children: []
      },{
        title: '测评管理',
        children: []
      },{
        title: '商城管理',
        children: []
      },{
        title: '报表',
        children: []
      },{
        title: '后台管理',
        children: []
      }]
      for(let i = 0, len = this.confirmData.menuIds.length; i < len; i ++) {
        let thisId = this.confirmData.menuIds[i] || ''
        let arr = thisId.split('-')
        MenuListData[arr[0] - 1]
        .children
        .push(this.$store.state.authSelect[arr[0] - 1].children[arr[1]])
      }
    },
    check(index) {

    },
    remove(index) {
      this.$Modal.confirm({
        title: '确定删除？',
        content: '<p>确定删除？</p>',
        onOk: () => {

        },
        onCancel: () => {
          // this.$Message.info('取消');
        }
      })
    },
    getTableData(index) {

    },
    getAllMenusData() {

    },
    setAuthSelect() {
      this.$store.state.authSelect = [{
        title: '首页管理',
        children: [{
          id: '1-1',
          title: 'banner管理',
          url: '/banner-management'
        },{
          id: '1-2',
          title: '版面图片管理',
          url: '/picture-management'
        }]
      },{
        title: '活动管理',
        children: [{
          id: '2-1',
          title: '活动分类管理',
          url: '/activity-management'
        },{
          id: '2-2',
          title: '活动列表',
          url: '/activity-list'
        }]
      },{
        title: '问卷管理',
        children: [{
          id: '3-1',
          title: '问卷管理',
          url: '/questionnaire'
        }]
      },{
        title: '测评管理',
        children: [{
          id: '4-1',
          title: '测评列表',
          url: '/evaluation'
        }]
      },{
        title: '商城管理',
        children: [{
          id: '5-1',
          title: '商品分类管理',
          url: '/mall-classification'
        },{
          id: '5-2',
          title: '商品列表',
          url: '/mall-list'
        },{
          id: '5-3',
          title: '热门活动管理',
          url: '/mall-hot'
        }]
      },{
        title: '报表',
        children: [{
          id: '6-1',
          title: '订单报表',
          url: '/report-order'
        },{
          id: '6-2',
          title: '用户报表',
          url: '/report-user'
        },{
          id: '6-3',
          title: '申诉报表',
          url: '/report-complaint'
        },{
          id: '6-4',
          title: '开票报表',
          url: '/report-invoice'
        }]
      },{
        title: '后台管理',
        children: [{
          id: '7-1',
          title: '权限管理',
          url: '/background-permission'
        },{
          id: '7-2',
          title: '账号管理',
          url: '/report-account'
        }]
      }]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  color: #000;
}
.pull-right {
  float: right;
}
.group-table-box {
  padding: 20px;
}
.group-top {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
}
.group-right {
  display: flex;
  justify-content: flex-end;
}
.input-item button {
  color: #fff;
}
.table-container-page {
  text-align: center;
  margin-top: 20px;
}
.modal-container {
  padding: 30px 30px 20px 30px;
}
.modal-content {
  margin-top: 15px;
}
.modal-label {
  font-size: 16px;
  text-align: center;
}
.modal-label-detail {
  text-align: center;
}
.modal-input {
  width: 100%;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  color: #fff;
  width: 100px;
}
.madal-radio-group {

}
.madal-radio {
  width: 20%;
  margin: 10px;
}
</style>
